У JavaScript змінні за областю видимості поділяються на: глобальні і локальні.
Глобальна змінна - це змінна яка доступна для всього коду веб-сторінки.
Локальна змінна - це змінна яка доступна в певній функції або блоку коду. Якщо об'являти змінну за допомогою var то змінна локальна в функції, якщо ж за допомогою let, const то змінна локальна у блоці { ... }.
Глобальна змінна існує доки завантажена веб-сторінка, якщо перезавантажити сторінку то змінна обновиться. А локальна змінна існує доки виконується функція або є блок.
//глобальна змінна
var a=2;
function test(){
//локальна змінна яка доступна лише в блоці функції
var b=2;
}
var a='JavaScript';
function test(){
var a='ЯваСкрипт';
alert( a ); // ЯваСкрипт
}
test();
alert(a); //JavaScript
let s='глобальна зміна s';
if(true){
let s='локальна зміна s';
alert( s );
}
alert( s );
const s='глобальна константа s';
if(true){
const s='локальна константа s';
alert( s );
}
alert( s );
Якщо об'являти локальну змінну то в глобальній області при звернені до змінної виникає помилка:
function test(){
var a='ЯваСкрипт'; //локальна зміна
alert( a );
}
test(); // ЯваСкрипт
alert('зміна a: '+a); //Reference Error: a is not defined
if(true){
let a=2; //локальна змінна яка об'явлена за допомогою let і доступна в блоці if{ ...}
alert( a );
}
alert( a ); //ReferenceError: a is not defined
if(true){
const a=2; //локальна константа яка доступна в блоці if{...}
alert(a);
}
alert(a); //ReferenceError: a is not defined
Якщо необхідно виконати код щоб змінні були в локальному середовищі використовують анонімні-функції:
(function(){
var a=2, b='js';
alert(b);
})();
Приклад видимості змінної при викононі коду в таймері. Так як таймер виконується пішніше локальні змінні не будуть доступні:
var a='глобальна змінна a';
function test(){
var a='локальна зміна a';
setTimeout(' alert( a ); ',1000);
}
test(); // глобальна змінна a